import { camelCaseString } from '/@/utils/event/design';

//查询为inputNumber的组件
const iptNumComponents = ['number', 'slider', 'rate', 'computational', 'money-chinese'];

const remoteComponents = [
  'select',
  'associate-select',
  'associate-popup',
  'multiple-popup',
  'checkbox',
  'radio',
];

export const handleSearchForm = (option, schema, item, isNeedTrans, convertCamel = true) => {
  if (!isNeedTrans) {
    return convertCamel
      ? `{
        field: '${camelCaseString(item.fieldName)}',
        label: '${schema!.label}',
        component: 'Input',
        colProps: { span: ${item.width} }
      },`
      : {
          field: item.fieldName,
          label: schema!.label,
          component: 'Input',
          colProps: { span: item.width },
        };
  }
  if (iptNumComponents.includes(schema.type)) {
    return convertCamel
      ? `{
        field: '${camelCaseString(item.fieldName)}',
        label: '${schema!.label}',
        component: 'InputNumber',
        componentProps:{
          style:{ width:'100%' }
        },
        colProps: { span: ${item.width} },
      },`
      : {
          field: item.fieldName,
          label: schema!.label,
          component: 'InputNumber',
          componentProps: {
            style: { width: '100%' },
          },
          colProps: { span: item.width },
        };
  }
  if (remoteComponents.includes(schema.type)) {
    if (option && option?.datasourceType === 'staticData') {
      return convertCamel
        ? `{
        field: '${camelCaseString(item.fieldName)}',
        label: '${schema!.label}',
        component: 'XjrSelect',
        componentProps: {
          datasourceType:'staticData',
          staticOptions: ${JSON.stringify(option.staticOptions)},
          labelField: '${option.labelField}',
          valueField: '${option.valueField}',
          ${
            schema.type === 'checkbox' || schema.type === 'multiple-popup' ? "mode:'multiple'," : ''
          }
          getPopupContainer: () => document.body,
        },
        colProps: { span: ${item.width} },
      },`
        : {
            field: item.fieldName,
            label: schema!.label,
            component: 'XjrSelect',
            componentProps: {
              datasourceType: 'staticData',
              staticOptions: option.staticOptions,
              labelField: option.labelField,
              valueField: option.valueField,
              mode:
                schema.type === 'checkbox' || schema.type === 'multiple-popup' ? 'multiple' : '',
              getPopupContainer: () => document.body,
            },
            colProps: { span: item.width },
          };
    } else if (option && option?.datasourceType === 'dic') {
      return convertCamel
        ? `{
        field: '${camelCaseString(item.fieldName)}',
        label: '${schema!.label}',
        component: 'XjrSelect',
        componentProps: {
          datasourceType:'dic',
          params: ${JSON.stringify(option.params)},
          labelField: '${option.labelField}',
          valueField: '${option.valueField}',
          ${
            schema.type === 'checkbox' || schema.type === 'multiple-popup' ? "mode:'multiple'," : ''
          }
          getPopupContainer: () => document.body,
        },
        colProps: { span: ${item.width} },
      },`
        : {
            field: item.fieldName,
            label: schema!.label,
            component: 'XjrSelect',
            componentProps: {
              datasourceType: 'dic',
              params: option.params,
              labelField: option.labelField,
              valueField: option.valueField,
              mode:
                schema.type === 'checkbox' || schema.type === 'multiple-popup' ? 'multiple' : '',
              getPopupContainer: () => document.body,
            },
            colProps: { span: item.width },
          };
    } else if (option && option?.datasourceType === 'api') {
      return convertCamel
        ? `{
      field: '${camelCaseString(item.fieldName)}',
      label: '${schema!.label}',
      component: 'XjrSelect',
      componentProps: {
        datasourceType:'api',
        apiConfig: ${JSON.stringify(option.apiConfig)},
        labelField: '${option.labelField}',
        valueField: '${option.valueField}',
        ${schema.type === 'checkbox' || schema.type === 'multiple-popup' ? "mode:'multiple'," : ''}
        getPopupContainer: () => document.body,
      },
      colProps: { span: ${item.width} },
    },`
        : {
            field: item.fieldName,
            label: schema!.label,
            component: 'XjrSelect',
            componentProps: {
              datasourceType: 'api',
              apiConfig: option.apiConfig,
              labelField: option.labelField,
              valueField: option.valueField,
              mode:
                schema.type === 'checkbox' || schema.type === 'multiple-popup' ? 'multiple' : '',
              getPopupContainer: () => document.body,
            },
            colProps: { span: item.width },
          };
    }
  }
  if (schema.type === 'switch') {
    return convertCamel
      ? `{
      field: '${camelCaseString(item.fieldName)}',
      label: '${schema!.label}',
      component: 'Select',
      componentProps:{
        getPopupContainer: () => document.body,
        options:[
          {
            label:'开',
            value: 1
          },{
            label:'关',
            value: 0
          }
        ]
      },
      colProps: { span: ${item.width} },
    },
    `
      : {
          field: item.fieldName,
          label: schema!.label,
          component: 'Select',
          componentProps: {
            options: [
              {
                label: '开',
                value: 1,
              },
              {
                label: '关',
                value: 0,
              },
            ],
          },
          colProps: { span: item.width },
        };
  }
  if (schema.type === 'time') {
    return convertCamel
      ? `{
      field: '${camelCaseString(item.fieldName)}',
      label: '${schema!.label}',
      component: 'TimeRangePicker',
      componentProps:{
        format:'${option.format}',
        style: { width: '100%' },
        getPopupContainer: () => document.body,
      },
      colProps: { span: ${item.width} },
    },`
      : {
          field: item.fieldName,
          label: schema!.label,
          component: 'TimeRangePicker',
          componentProps: {
            format: option.format,
            style: { width: '100%' },
            getPopupContainer: () => document.body,
          },
          colProps: { span: item.width },
        };
  }
  if (schema.type === 'date') {
    return convertCamel
      ? `{
      field: '${camelCaseString(item.fieldName)}',
      label: '${schema!.label}',
      component: 'RangePicker',
      componentProps:{
        format:'${option.format}',
        style: { width: '100%' },
        getPopupContainer: () => document.body,
      },
      colProps: { span: ${item.width} },
    },
    `
      : {
          field: item.fieldName,
          label: schema!.label,
          component: 'RangePicker',
          componentProps: {
            format: option.format,
            style: { width: '100%' },
            getPopupContainer: () => document.body,
          },
          colProps: { span: item.width },
        };
  }
  if (schema.type === 'user') {
    return convertCamel
      ? `{
      field: '${camelCaseString(item.fieldName)}',
      label: '${schema!.label}',
      component: 'User',
      componentProps:{
        suffix:'ant-design:setting-outlined',
        placeholder:'请选择'
      },
      colProps: { span: ${item.width} },
    },
    `
      : {
          field: item.fieldName,
          label: schema!.label,
          component: 'User',
          componentProps: {
            suffix: 'ant-design:setting-outlined',
            placeholder: '请选择',
          },
          colProps: { span: item.width },
        };
  }
  if (schema.type === 'area') {
    return convertCamel
      ? `{
      field: '${camelCaseString(item.fieldName)}',
      label: '${schema!.label}',
      component: 'Area',
      componentProps:{
        suffix:'ant-design:setting-outlined',
        placeholder:'请选择',
        getPopupContainer: () => document.body,
      },
      colProps: { span: ${item.width} },
    },
    `
      : {
          field: item.fieldName,
          label: schema!.label,
          component: 'Area',
          componentProps: {
            suffix: 'ant-design:setting-outlined',
            placeholder: '请选择',
            getPopupContainer: () => document.body,
          },
          colProps: { span: item.width },
        };
  }
  if (schema.type === 'organization') {
    return convertCamel
      ? `{
      field: '${camelCaseString(item.fieldName)}',
      label: '${schema!.label}',
      component: '${schema!.component}',
      componentProps:{
        placeholder:'请选择',
        getPopupContainer: () => document.body,
      },
      colProps: { span: ${item.width} },
    },`
      : {
          field: item.fieldName,
          label: schema!.label,
          component: schema!.component,
          componentProps: {
            placeholder: '请选择',
            getPopupContainer: () => document.body,
          },
          colProps: { span: item.width },
        };
  }
  if (schema.type === 'cascader') {
    return convertCamel
      ? `{
      field: '${camelCaseString(item.fieldName)}',
      label: '${schema!.label}',
      component: '${schema!.component}',
      componentProps: {
        apiConfig: ${JSON.stringify(option.apiConfig)},
        showFormat: '${option.showFormat}',
        separator: '${option.separator}',
        selectedConfig: 'any',
      },
      colProps: { span: ${item.width} },
    },
    `
      : {
          field: item.fieldName,
          label: schema!.label,
          component: schema!.component,
          componentProps: {
            apiConfig: option.apiConfig,
            showFormat: option.showFormat,
            separator: option.separator,
            selectedConfig: 'any',
          },
          colProps: { span: item.width },
        };
  }
  if (schema.type === 'info') {
    if (option && option.infoType === 0) {
      return convertCamel
        ? `{
        field: '${camelCaseString(item.fieldName)}',
        label: '${schema!.label}',
        component: 'User',
        componentProps:{
          suffix:'ant-design:setting-outlined',
          placeholder:'请选择'
        },
        colProps: { span: ${item.width} },
      },
      `
        : {
            field: item.fieldName,
            label: schema!.label,
            component: 'User',
            componentProps: {
              suffix: 'ant-design:setting-outlined',
              placeholder: '请选择',
            },
            colProps: { span: item.width },
          };
    } else if (option && option.infoType === 1) {
      return convertCamel
        ? `{
        field: '${camelCaseString(item.fieldName)}',
        label: '${schema!.label}',
        component: 'Dept',
        componentProps:{
          placeholder:'请选择',
          getPopupContainer: () => document.body,
        },
        colProps: { span: ${item.width} },
      },
      `
        : {
            field: item.fieldName,
            label: schema!.label,
            component: 'Dept',
            componentProps: {
              placeholder: '请选择',
              getPopupContainer: () => document.body,
            },
            colProps: { span: item.width },
          };
    } else if (option && option.infoType === 2) {
      return convertCamel
        ? `{
        field: '${camelCaseString(item.fieldName)}',
        label: '${schema!.label}',
        component: 'RangePicker',
        componentProps: {
          showTime: true,
          style: { width: '100%' },
          getPopupContainer: () => document.body,
        },
        colProps: { span: ${item.width} },
      },
      `
        : {
            field: item.fieldName,
            label: schema!.label,
            component: 'RangePicker',
            componentProps: {
              showTime: true,
              style: { width: '100%' },
              getPopupContainer: () => document.body,
            },
            colProps: { span: item.width },
          };
    }
  }
  return convertCamel
    ? `{
      field: '${camelCaseString(item.fieldName)}',
      label: '${schema!.label}',
      component: '${schema!.component}',
      colProps: { span: ${item.width} },
    },
    `
    : {
        field: item.fieldName,
        label: schema!.label,
        component: schema!.component,
        colProps: { span: item.width },
      };
};

export const handleAppSearchForm = (option, schema, item, isNeedTrans, convertCamel = true) => {
  if (!schema) return;
  const fieldName = convertCamel ? camelCaseString(item.fieldName) : item.fieldName;
  const field = `field: '${fieldName}',`;
  const params = `key: '${schema.key}',
      name: '${schema!.label}',
      label: '${schema!.label}',`;
  if (isNeedTrans) {
    if (schema.component == 'TimeRange') {
      return `{
        ${params} 
        field: '${fieldName + 'Start,' + fieldName + 'End'}',
        component: componentType.timeRange, //组件类型
        startTimeField:'${fieldName + 'Start'}',
				endTimeField:'${fieldName + 'End'}',
        componentProps: { 
          startTimePlaceholder: '开始时间',
          endTimePlaceholder: '结束时间',
          isRange: true,
        }, //组件的所有配置信息
      },`;
    } else if (schema.component == 'DateTime') {
      return `{
        ${params}
        field: '${fieldName + 'Start,' + fieldName + 'End'}',
        component: componentType.dateRange, //组件类型
        startTimeField:'${fieldName + 'Start'}',
				endTimeField:'${fieldName + 'End'}',
        componentProps: {
          formatType:'${
            option.format == 'YYYY-MM'
              ? 'month'
              : option.format == 'YYYY'
              ? 'year'
              : option.format == 'YYYY-MM-DD HH:mm:ss'
              ? 'datetime'
              : 'date'
          }',
          type: "datetimerange", //日期时间范围选择器
          startPlaceholder: '开始日期',
          endPlaceholder: '结束日期',
        }, //组件的所有配置信息
      },`;
    } else if (schema.component == 'Switch') {
      return `{
        ${params}
        ${field}
        component: componentType.select, //组件类型  
        componentProps: { 
          localdata:[{text:'开',value:1},{text:'关',value:0}], 
        },  
      },`;
    } else if (
      schema.component == 'Checkbox' ||
      schema.component == 'Radio' ||
      schema.component == 'Select'
    ) {
      return `{
        ${params}
        ${field}
        component: componentType.select, //组件类型
        componentProps: ${JSON.stringify(schema.componentProps)},
      },`;
    } else if (schema.component == 'colorPicker') {
      return `{
        ${params}
        ${field}
        component: componentType.color, //组件类型 
        defaultValue:null,
        componentProps: {},  
      },`;
    } else if (schema.component == 'InputNumber') {
      return `{
        ${params}
        ${field}
        component: componentType.input, //组件类型
        componentProps: {
          type: 'number',
        },
      },`;
    } else if (schema.component == 'Info') {
      if (schema.componentProps.infoType === 0) {
        return `{
          ${params}
          ${field}
          component: componentType.user, //组件类型
          componentProps: {
            placeholder: '请选择人员',
            suffixIcon: 'ant-design:setting-outlined',
          },
        },`;
      } else if (schema.componentProps.infoType === 1) {
        return `{
          ${params}
          ${field}
          component: componentType.organization, //组件类型
          componentProps: {
            placeholder: '请选择组织架构',
          },
        },`;
      } else if (schema.componentProps.infoType === 2) {
        return `{
          ${params}
          field: '${fieldName + 'Start,' + fieldName + 'End'}',
          component: componentType.dateRange, //组件类型
          startTimeField:'${fieldName + 'Start'}',
				  endTimeField:'${fieldName + 'End'}',
          componentProps: {
            formatType: 'datetime',
            type: 'datetimerange', //日期时间范围选择器
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
          },
        },`;
      }
    } else {
      return JSON.stringify(schema) + ',';
    }
  } else {
    return `{
      ${params}
      ${field}
      component: componentType.input, //组件类型
      componentProps: { 
        placeholder: '请输入${schema.label}',
      }
    },`;
  }
};
